<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		.box{
			width: 100%;
			height: 200px;
			overflow: hidden;
			text-align: center;
			color: #fff;
		}
        .left{
        	width: 200px;
        	float: left;
        	height: 100%;
        	background: #000;
        }
        .right{
        	width: 100%;
        	height: 100%;
        	background: #ccc;
        }

        /*第二种*/
        .container{
        	display: flex;
        	width: 100%;
        	height: 200px;
        	text-align: center;
        }
        .left_a{
        	width: 200px;
        	height: 100%;
        	background: red;
        }
        .right_a{
        	flex: 1;
        	height: 100%;
        	background:yellow;
        }

        /*第三种*/
        .flex{
        	float: left;
        	width: 100%;
        	text-align: center;
        }
        .right_b{
        	margin-left: 200px;
        	background: green;
        }
        .left_b{
        	width: 200px;
        	float: left;
        	margin-left: -100%;
        	background: #abcdef;
        }
	</style>
</head>
<body>
<!--第一种:左边浮动，右边宽度100% -->
<div class="box">
	<div class="left">左</div>
	<div class="right">右</div>
</div>
<!-- 第二种：使用弹性布局，将右边的flex值设为1 -->
<div class="container">
	<div class="left_a">左</div>
	<div class="right_a">右</div>
</div>
<!-- 第三种：使用负margin -->
<div class="flex">
	<div class="right_b">右</div>
</div>
<div class="left_b">左</div>
</body>
</html>